<template>
    <div class="usercenter">
        <div class="goodsImg">
            <img src="./img/logo.png"/>
        </div>
        <ul class="list-item">
            <li class="verify-input">
                <input type="text" v-model="verificationCode" placeholder="输入验证"/>
                <div class="verify-btn" @click="verify">验证</div>
            </li>
            <li class="verify-result">
                <p>{{verifyResult}}</p>
            </li>
        </ul>
        <ul style="margin-top:10px;" v-if="showInfo">
            <li>
                <div class="flex" @click="showProInfo">
                    <p class="p-title">产品内容介绍</p>
                    <img class="next_arrow" src="./img/ic_next.png" :class="showPro?'transform':'' "/>
                </div>
                <div class="p-content" v-if="showPro">
                    <img :src="item" v-for="(item, index) in info.detailPaths" :key="index" class="p-imgs"/>
                </div>
            </li>
            <li>
                <div class="flex" @click="showProUnit">
                    <p class="p-title">产品规格</p>
                    <img class="next_arrow" src="./img/ic_next.png" :class="showUnit?'transform':'' "/>
                </div>
                <div class="p-content" v-if="showUnit">
                    <div v-html="info.unit"></div>
                </div>
            </li>
            <li>
                <div class="flex" @click="showProBelong">
                    <p class="p-title">产品归属人</p>
                    <img class="next_arrow" src="./img/ic_next.png" :class="showUserName?'transform':'' "/>
                </div>
                <div class="p-content" v-if="showUserName">
                    <div v-html="info.userName"></div>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
    import {getQuery} from '@/utils/utils'
    import GoodsService from '_common/services/goods'
    import {MessageBox} from 'element-ui'
    export default {
        name: 'goodsVerify',
        data() {
            return {
                verificationCode: '',
                info: {},
                showInfo: false,
                verifyResult: '',
                showUnit: true,
                showPro: true,
                showUserName: true

            }
        },
        computed: {},
        mounted(){
            this.qrcode = getQuery('qrcode')
        },
        methods: {
            showProInfo () {
                this.showPro = ! this.showPro
                console.log(this.showPro)
            },
            showProUnit () {
                this.showUnit = ! this.showUnit
                console.log(this.showUnit)
            },
            showProBelong () {
                this.showUserName = ! this.showUserName
                console.log(this.showUserName)
            },
            verify () {
                if (!this.verificationCode) {
                    this.$alertTip('请填写验证码')
                    return false
                }
                GoodsService.goodsVerify(this.qrcode, this.verificationCode).then(res => {
                    if (res && res.code === 0) {
                        this.showInfo = true
                        this.showUnit = this.showPro = this.showUserName = true
                        this.info = res.data
                        this.verifyResult = '该产品为首次验证，请放心使用'
                        this.verifyResult = '该产品已被验证！'
                    }
                    else {
                        this.$alertTip(res.msg || '修改失败，请稍后再试')
                    }
                }, reject => {
                    this.$alertTip('修改失败，请稍后再试')
                })
            }
        },
        components: {}
    }
</script>
<style lang="less" scoped>
    @import "../../css/common";
    @import "../../css/commonlayout";

    .font-40 {
        font-size: 40px;
    }

    .ligher-grey {
        color: #ddd;
    }

    .goodsImg {
        width: 180px;
        height: 180px;
        border-radius: 50%;
        overflow: hidden;
        margin: 50px auto;
        text-align: center;
        background: #fff;
        .flex();
        img {
            width: 100%;
        }
    }

    .usercenter .list-item {
        li {
            margin-top: 0px;
            &.verify-result {
                background-color: transparent;
                color: @color_orange;
                &.red {
                    color: #f00
                }
            }
        }
    }

    .verify-input {
        input {
            .auto();
            width: 80%;
        }
        .verify-btn {
            width: 120px;
            height: 60px;
            line-height: 60px;
            font-size: 30px;
            background: @color_orange;
            color: #fff;
            border-radius: 6px;
            text-align: center;
        }
    }

    .flex {
        color: #333;
        padding: .833333rem 1.166667rem;
        background-color: #fff;
        border-bottom: .066667rem solid #eaeaea;
        .flex(space-between);
        .p-title {
            font-size: 1rem;
        }
        .next_arrow {
            width: 17px;
            height: 29px;
            &.transform{
                transform: rotate(90deg);
            }
        }
    }

    .p-content {
        padding: 1.066667rem;
        font-size: 28px;
        img {
            width: 100% !important;
        }
    }
</style>